<template>
  <view 
    class="touch-feedback"
    :class="{ 
      'touch-feedback--active': isPressed,
      'touch-feedback--disabled': disabled 
    }"
    @touchstart="handleTouchStart"
    @touchend="handleTouchEnd"
    @touchcancel="handleTouchCancel"
    @click="handleClick"
  >
    <slot></slot>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface Props {
  disabled?: boolean;
  activeOpacity?: number;
  activeScale?: number;
  hapticFeedback?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  activeOpacity: 0.8,
  activeScale: 0.98,
  hapticFeedback: true,
});

const emit = defineEmits<{
  click: [event: Event];
}>();

const isPressed = ref(false);

const handleTouchStart = () => {
  if (props.disabled) return;
  
  isPressed.value = true;
  
  // 触觉反馈
  if (props.hapticFeedback) {
    uni.vibrateShort({
      type: 'light'
    });
  }
};

const handleTouchEnd = () => {
  isPressed.value = false;
};

const handleTouchCancel = () => {
  isPressed.value = false;
};

const handleClick = (event: Event) => {
  if (props.disabled) return;
  emit('click', event);
};
</script>

<style lang="scss" scoped>
.touch-feedback {
  transition: all 0.15s ease;
  cursor: pointer;
  
  &--active {
    opacity: v-bind(activeOpacity);
    transform: scale(v-bind(activeScale));
  }
  
  &--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}
</style>